<!--
 * @Description: file content
 * @Author: seadon
 * @LastEditors: seadon
 * @Date: 2021-12-11 11:14:45
 * @LastEditTime: 2022-04-18 12:00:18
-->
<template>
	<div class="input-search">
		<a-input
			v-model:value="inputValue"
			:placeholder="searchPlaceholder"
			style="width: 384px"
			@change="onSearch"
		>
			<template #suffix>
				<i
					v-if="!inputValue"
					class="low-code iconsousuo1 input-search-icon"
				></i>
				<i
					v-else
					class="low-code iconcuo input-search-icon"
					@click="onClear"
				></i>
			</template>
		</a-input>
	</div>
</template>

<script lang="ts" setup>
import { ref, defineProps, watch, defineExpose, defineEmits } from 'vue'
const props = defineProps({
	searchPlaceholder: String,
	taskType: String,
	doneType: String,
})
const inputValue = ref('')
const emit = defineEmits(['search'])
const onSearch = () => {
	emit('search', inputValue.value)
}
const clearInput = () => {
	inputValue.value = ''
}
const onClear = () => {
	clearInput()
	onSearch()
}

watch(
	() => props.doneType,
	() => {
		inputValue.value = ''
	}
)

watch(
	() => props.taskType,
	() => {
		inputValue.value = ''
	}
)

defineExpose({
	onClear,
	clearInput,
})
</script>

<style lang="less">
.iconcuo {
	cursor: pointer;
}
.input-search-icon {
	color: @rok-mobile-auxiliary-color;
}
</style>
